<template>
  <div class="card" v-if="item">
    <div class="first">
      <div class="left">
        <van-checkbox v-model="checked" @change="changeItem" />
      </div>
      <div class="right">
        <div
          class="img-box"
          :style="{ backgroundImage: `url(${item.img})` }"
        ></div>
        <div class="info">
          <van-icon v-show="showDelete" @click.stop="deleteItem" class="delete-item" name="delete-o" />
          <div class="title">
            <div class="my-text">{{ item.title }}</div>
            <div class="tag">{{item.goodTag.sd}}</div>
            <van-stepper class="my-stepper" v-model="value" @change="changeValue" min="1" max="99" />
          </div>
          <div class="price">
            <div class="p">&yen;{{ item.p }}</div>
            <div class="op">&yen;{{ item.op }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="sec">
      <span>小计 (共{{ item.goodValue }}) : </span
      ><span class="price">&yen;{{ price }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item","num","showDelete"],
  data: () => {
    return {
      checked: false,
      value:1
    };
  },
  watch:{
    num(){
      this.checked = this.item.isChecked;
    }
  },
  computed:{
    price(){
      return (this.item.goodValue * this.item.p).toFixed(2);
    }
  },
  methods: {
    deleteItem(){
      let myshop = JSON.parse(localStorage.getItem("myShop")) || [];
      myshop = myshop.filter((item) => item.goodTag.id != this.item.goodTag.id);
      localStorage.setItem("myShop", JSON.stringify(myshop));
      this.$emit("itemChange");
      this.$toast.success("删除成功");
    },
    changeValue(){
      let myshop = JSON.parse(localStorage.getItem("myShop")) || [];
      myshop = myshop.map((item) => {
        if (item.goodTag.id == this.item.goodTag.id) {
          item.goodValue = this.value;
          return item;
        } else {
          return item;
        }
      });
      localStorage.setItem("myShop", JSON.stringify(myshop));
      this.$emit("itemChange");
    },
    changeItem() {
      let myshop = JSON.parse(localStorage.getItem("myShop")) || [];
      myshop = myshop.map((item) => {
        if (item.goodTag.id == this.item.goodTag.id) {
          item.isChecked = this.checked;
          return item;
        } else {
          return item;
        }
      });
      localStorage.setItem("myShop", JSON.stringify(myshop));
      this.$emit("itemChange");
    },
  },
  created() {
    this.checked = this.item.isChecked;
    this.value = this.item.goodValue;
  },
};
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  box-sizing: border-box;
  padding: 0.15rem;
  .first {
    display: flex;
    .left {
      margin-top: 0.1rem;
    }
    .right {
      display: flex;
      margin-left: 0.1rem;
      .img-box {
        min-width: 0.77rem;
        width: 0.77rem;
        height: 0.77rem;
        border-radius: 0.1rem;
        overflow: hidden;
      }
      .info {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        .delete-item {
          position: absolute;
          margin: auto 0;
          right: 0.05rem;
          top: 0.5rem;
        }
        .title {
          height: 0.2rem;
          font-size: 0.16rem;
          line-height: 0.2rem;
          margin: 0 0.1rem;
          color: var(--text-black);
          .tag{
            margin: 0.05rem 0;
            font-size: 0.12rem;
            line-height: 0.22rem;
            text-align: center;
            padding: 0.02rem 0.04rem;
            border-radius: 0.02rem;
            background-color: var(--bgc-yellow);
            width: max-content;
            box-sizing: border-box;
          }
        }
        .p {
          font-size: 0.14rem;
          color: var(--text-red);
        }
        .op {
          font-size: 0.12rem;
          color: var(--text-gray);
          text-decoration: line-through;
        }
      }
    }
  }
  .sec {
    text-align: end;
    font-size: 0.13rem;
    color: var(--text-gray);
    .price {
      color: var(--text-red);
    }
  }
}
</style>